<template>
    <el-button type="info" round @click="addusers">添加用户</el-button>
    <el-input v-model="searchInput" placeholder="Please input" style="width: 300px;" />
    <el-button type="primary" round @click="search">查找</el-button>
    <el-table :data="userList.userData" style="width: 100%;margin-top: 100px;">
        <el-table-column prop="id" label="Id" />
        <el-table-column prop="role_name" label="用户名" />
        <el-table-column prop="username" label="昵称" />
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column>
            <template v-slot="scope">
                <el-switch v-model="scope.row.mg_state" @change="modifyState(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column>
            <template v-slot="scope">
                <el-button type="primary" round @click="modifyuser(scope.row)">修改</el-button>
            </template>
        </el-table-column>
        <el-table-column>
            <template v-slot="scope">
                <el-button type="danger" round @click="deleteUser(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination
        :page-sizes="[10, 15, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
    <!-- 搜索弹出框 -->
    <el-button type="text" @click="dialogFormVisible = true"></el-button>
    <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-form :model="searchList">
            <el-form-item label="用户ID" :modal="true">
                <el-input v-model="searchList.id" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="用户名称">
                <el-input v-model="searchList.username" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="searchList.email" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="searchList.mobile" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="用户角色ID">
                <el-input v-model="searchList.role_id" autocomplete="off" disabled />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加用户 -->
    <el-button type="text" @click="dialogAddUsersVisible = true"></el-button>
    <el-dialog v-model="dialogAddUsersVisible" title="Shipping address">
        <el-form :model="addUsersList">
            <el-form-item label="用户名称">
                <el-input v-model="addUsersList.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="用户密码">
                <el-input v-model="addUsersList.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="addUsersList.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="addUsersList.mobile" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer" style="margin-right: 20px;">
                <el-button type="primary" @click="dialogAddUsersVisible = false">取消</el-button>
            </span>
            <span class="dialog-footer">
                <el-button type="primary" @click="AddUsers">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-button type="text" @click="dialogmodifyuserUser = true"></el-button>
    <el-dialog v-model="dialogmodifyuserUser" title="Shipping address">
        <el-form :model="modifyUser">
            <el-form-item label="用户ID">
                <el-input v-model="modifyUser.editData.id" autocomplete="off" disabled />
            </el-form-item>
            <!--  <el-form-item label="用户名称">
                <el-input v-model="modifyUser.username" autocomplete="off" />
            </el-form-item>-->
            <el-form-item label="手机号">
                <el-input v-model="modifyUser.editData.mobile" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="modifyUser.editData.email" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer" style="margin-right: 20px;">
                <el-button type="primary" @click="dialogmodifyuserUser = false">取消</el-button>
            </span>
            <span class="dialog-footer">
                <el-button type="primary" @click="ModifyUser">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { MyAxios } from '../request/MyAxios'
//导入element
import { ElMessage } from 'element-plus'
// const value2 = ref(true)
const searchInput = ref('') //用来接受搜索框的数值
//储存渲染的数据
const userList = reactive({
    userData: [],

})
//分页
const userDatainfo = reactive({
    queryinfo: {
        query: '',
        pagesize: 10,
        pagenum: 1
    }
})
var total = ref('')
//搜索
const dialogFormVisible = ref(false)//搜索弹出框
//储存搜索到的值
var searchList = reactive({
    id: '',
    role_id: '',
    mobile: '',
    email: '',
    username: ''
})
//添加用户
const dialogAddUsersVisible = ref(false) //添加弹出框
var addUsersList = reactive({
    username: '', //用户名称
    password: '', //用户密码
    email: '', //邮箱
    mobile: '', //手机号
})
//修改
const dialogmodifyuserUser = ref(false)
//储存修改的值
var modifyUser: any = reactive({
    editData: []
})
//修改用户状态值
const scope = ref('')
// -----------------------以下是代码-------------------------------------------------
//修改状态值
const modifyState = async function (userinfo) {
    // console.log(userinfo);
    var { data } = await MyAxios.put(`/users/${userinfo.id}/state/${userinfo.mg_state}`)
    if (data.meta.status == 200) {
        ElMessage({
            message: '修改状态值成功',
            type: 'success',
        })
    } else {
        ElMessage.error(data.data.meta.msg)
    }
}

//修改 -- 弹窗
const modifyuser = function (row: any) {
    modifyUser.editData = row
    dialogmodifyuserUser.value = true
}
//修改
const ModifyUser = async function () {
    var { data } = await MyAxios.put('/users/' + modifyUser.editData.id, modifyUser.editData)
    // console.log(data.data.id);
    dialogmodifyuserUser.value = false
    if (data.meta.status == 200) {
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
        getData()
        dialogmodifyuserUser.value = false
    } else {
        ElMessage.error(data.data.meta.msg)
    }
}
//删除
const deleteUser = async function (userinfo) {
    var dele = confirm('该操作比较危险！！！请问确定删除此用户吗？')
    if (dele) {
        var data = await MyAxios.delete('/users/' + userinfo.id)
        if (data.data.meta.status == 200) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getData()
        } else {
            ElMessage.error(data.data.meta.msg)
        }

    } else {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })

    }

}
//添加 -- 弹窗
const addusers = function () {
    dialogAddUsersVisible.value = true
}
//添加
const AddUsers = async function () {
    var { data } = await MyAxios.post('/users', addUsersList)
    if (data.meta.status == 201) {
        ElMessage({
            message: '创建成功',
            type: 'success',
        })
        dialogAddUsersVisible.value = false
        addUsersList.username = ''
        addUsersList.password = ''
        addUsersList.email = ''
        addUsersList.mobile = ''
        getData()
    } else {
        ElMessage.error(data.meta.msg)
    }

}
//搜索
const search = async function () {
    if (searchInput.value == '') {
        alert('请输入内容')
    } else {
        var { data } = await MyAxios.get('/users/' + searchInput.value)
        //将查询到的值赋值给一个对象中
        // console.log(data.meta);
        if (data.meta.status == 200) {
            searchList.id = data.data.id
            searchList.username = data.data.username
            searchList.role_id = data.data.rid
            searchList.mobile = data.data.mobile
            searchList.email = data.data.email
            dialogFormVisible.value = true
            searchInput.value = ''
        } else {
            ElMessage.error(data.meta.msg)
        }
    }
}
//设置用户列表每一页的条数
const handleSizeChange = function (newSize: any) {
    userDatainfo.queryinfo.pagesize = newSize
    getData()
}
//设置跳转到第几页
const handleCurrentChange = function (newNum: any) {
    userDatainfo.queryinfo.pagenum = newNum
    getData()
}
//封装渲染
async function getData() {
    var { data } = await MyAxios.get(`/users`, { params: userDatainfo.queryinfo })
    userList.userData = data.data.users
    total.value = data.data.total
    // mg_state
    // console.log(userList.userData);

}
//渲染数据 -- 页面一打开就进行渲染
onMounted(async () => {
    getData()

})
</script>
<style>
</style>